<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转导航</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="container">
    <div class="circle-container">
      <div class="circle">
        <button id="close">
          <i>关</i>
        </button>
        <button id="open">
          <i>开</i>
        </button>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <h1>导航</h1>
      <small>Lorin Page</small>
      <p>
        夏天到了，森林里的小动物们正在为百灵鸟小姐举行一场盛大的音乐晚会。小鼹鼠、小兔子、小松鼠、小猴子、小狐狸、小山雀等都围坐在一起，津津有味地听百灵鸟小姐唱歌。百灵鸟小姐不愧是森林里有名的大明星，她站在舞台上，（儿童浪漫故事）一边放开甜美的歌喉，唱着好听的歌儿，一边舒展身体，跳着优美的舞蹈。坐在下面的小动物们，一个个竖起耳朵、伸长脖子连眼睛也舍不得多眨一下，生怕错过一个音符，漏掉一个动作。
      </p>
      <h3>MyDog</h3>
      <img src="https://img2.baidu.com/it/u=471605427,1896058937&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="dog">
      <p>
        夏天到了，森林里的小动物们正在为百灵鸟小姐举行一场盛大的音乐晚会。小鼹鼠、小兔子、小松鼠、小猴子、小狐狸、小山雀等都围坐在一起，津津有味地听百灵鸟小姐唱歌。百灵鸟小姐不愧是森林里有名的大明星，她站在舞台上，（儿童浪漫故事）一边放开甜美的歌喉，唱着好听的歌儿，一边舒展身体，跳着优美的舞蹈。坐在下面的小动物们，一个个竖起耳朵、伸长脖子连眼睛也舍不得多眨一下，生怕错过一个音符，漏掉一个动作。
      </p>
    </div>
  </div>
  <nav>
    <ul>
      <li> <a href="#">Home</a> </li>
      <li> <a href="#">About</a> </li>
      <li> <a href="#">Contact</a> </li>
    </ul>
  </nav>
  <script src="./script.js"></script>
</body>

</html>